<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" 
    data-target="#modal-shopping-cart">
    <i class="now-ui-icons shopping_cart-simple"></i>
    (<span ng-bind="$ctrl.cartData.totalItems"></span>)
</button>
<div class="modal" id="modal-shopping-cart">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <form ng-class="{'submitted': submitted}" ng-submit="$ctrl.book()">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Shopping Cart</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div class="col-12">
                        <ul>
                            <li class="row cart-item" ng-repeat="item in $ctrl.cartData.items">
                                <div class="col-sm-2">
                                    <img height="50" width="auto" ng-if="item.imageUrl" src="{{item.imageUrl}}" />
                                </div>
                                <span class="col-sm-5" ng-bind="item.title"></span>
                                <input type="number" class="form-control-sm col-sm-1" ng-change="$ctrl.calculate()"
                                    ng-model="item.quantity" />
                                <span class="col-sm-3 text-right" ng-bind="item.price | money"></span>
                                <a class="col-sm-1 text-danger" ng-click="$ctrl.removeItem($index)">X</a>
                            </li>
                            <li class="row">
                                <span class="col-sm-8 text-right">Total: </span>
                                <span class="col-sm-3 text-right" ng-bind="$ctrl.cartData.total | money"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="col-12">
                        <h4>Info</h4>
                        <div class="form-group">
                            <input class="form-control" required type="text" ng-model="$ctrl.order.name"
                                placeholder="Name">
                        </div>
                        <div class="form-group">
                            <input class="form-control" required type="email" ng-model="$ctrl.order.email"
                                placeholder="Email">
                        </div>
                        <div class="form-group">
                            <input class="form-control" required type="text" ng-model="$ctrl.order.phone"
                                placeholder="Phone">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" ng-model="$ctrl.order.message"
                                placeholder="message"></textarea>
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" ng-click="$ctrl.book()" class="btn btn-primary"
                        style="color:white">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
